/*
 * @Description: 顶部搜索导航
 * @Author: Yong
 * @Date: 2021-09-25 22:43:10
 * @LastEditTime: 2021-09-25 22:46:31
 */
import React from 'react'

import { Flex } from 'antd-mobile'

import { withRouter } from 'react-router-dom'

import PropTypes from 'prop-types'

// 导入样式
import './index.scss'

function SearchHeader ({ history, cityName, className }) {
    return (
        <Flex className={ [ 'search-box', className || '' ].join(' ') }>
            {/* 左侧白色区域 */}
            <Flex className="search">
                {/* 位置 */}
                <div className="location" onClick={() => history.push('/cityList')}>
                    <span className="name">{cityName}</span>
                    <i className="iconfont icon-arrow" />
                </div>

                {/* 搜索表单 */}
                <div className="form" onClick={() => history.push('/search')}>
                    <i className="iconfont icon-seach" />
                    <span className="text">请输入小区或地址</span>
                </div>
            </Flex>
            {/* 右侧地图图标 */}
            <i className="iconfont icon-map" onClick={() => history.push('/map')} ></i>
        </Flex>
    )
}

// 添加属性校验
SearchHeader.propTypes = {
    cityName: PropTypes.string.isRequired,
    className: PropTypes.string
}

export default withRouter(SearchHeader)